/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    Text,
    View,
    TextInput,
    Image,
    TouchableHighlight,
    AsyncStorage,
    Alert,
} from 'react-native';

import {styles}  from '../styles/style';

// let  seconds = 60;
export default class Login extends Component {
    constructor(props) {
        // console.log(props)
        super(props);
        this.state ={
            mobile:'',
            getCode:'',
            seconds:10,
        };
    }
    componentWillMount() {
        AsyncStorage.getItem('phone')
            .then(phone=>{
                this.setState({
                    mobile:phone,
                })
            })
    };
    _getCode(){
        let mobile=this.state.mobile;
        if( mobile!=''){
            let rsg=/^1(3|4|5|7|8)\d{9}$/;
            if(!rsg.test(mobile)){
                Alert.alert("提示","请输入正确的手机号码");
                return;
            }
        }
        if(mobile===''){
            Alert.alert("提示","请输入手机号码");
            return;
        }

        if(this.state.seconds != 10){
            return;
        }



        this.getHttp();

    }
    clickCode(){
        this.interval=setInterval(() =>{
            let codeSecond=this.state.seconds-1
            if(codeSecond<=0){
                this.interval&&clearInterval(this.interval);
                this.setState({
                    seconds:10,
                    getCodeText:'重新获取'
                })
            }else{
                this.setState({
                    seconds:codeSecond,
                })
            }
        },1000)
    }
    getHttp(){
        let mobile=this.state.mobile;
        fetch('http://121.40.178.164:4040/react-service/api/memberInfo/sendSMS.do', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'mobile'+'='+mobile
        })
            .then((response) => response.json()) //把response转为json
            .then((responseData) => { // 上面的转好的json
                console.log(responseData);
                AsyncStorage.setItem("phone",mobile);

                if(responseData.code==0){
                    this.clickCode();

                }else{
                    alert(responseData.res.msg)
                }

            })
            .catch((error)=> {
                alert('错误了');
            })

    }
    login(){
        let mobile=this.state.mobile;
        let code=this.state.getCode;
        if( mobile!=''){
            let rsg=/^1(3|4|5|7|8)\d{9}$/;
            if(!rsg.test(mobile)){
                Alert.alert("提示","请输入正确的手机号码");
                return;
            }
        }
        if(mobile===''){
            Alert.alert("提示","请输入手机号码");
            return;
        }
        if(code==''){
            alert('请输入验证码');
            return;
        }
        fetch('http://121.40.178.164:4040/react-service/api/memberInfo/login.do', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'mobile='+mobile+'&smsCode='+code
        })
            .then((response) => response.json()) //把response转为json
            .then((responseData) => { // 上面的转好的json
                // let res=JSON.stringify(responseData);
                AsyncStorage.setItem("phone",mobile);


                if(responseData.code==0){
                    this.props.navigation.navigate('List');

                }
                else{
                    console.log(responseData)
                    alert(responseData.res.msg)
                }

                // this.props.navigation.goBack();
            })
            .catch((error)=> {
                alert('错误了'+error);
            })
    }

    // checkPhone(mobile) {
    //     return   mobile.test('/^1(3|4|5|7|8)\d{9}$/');
    //     // return mobile.match('/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/');
    // };


    render() {
        let getCodeText = this.state.seconds == 10 ? '获取验证码' : (this.state.seconds + '秒后重新获取');
        return (
            <View style={styles.container}>
                <View style={styles.logo}>
                    <Image
                        source={require('../images/innjia-logo.png')}//注意你的图片引用路径
                        style={styles.logoimg} />
                </View>
                <View style={styles.item}>
                    <View>
                        <Image
                            source={require('../images/mobile_ICON_Copy.png')}
                            style={styles.ionicimg}/>
                    </View>

                    <TextInput
                        ref="inputLoginName"
                        autoFocus={true}
                        placeholder="请输入手机号"
                        clearTextOnFocus={true}
                        clearButtonMode="while-editing"
                        underlineColorAndroid={'transparent'}
                        maxLength={11}
                        keyboardType={'numeric'}
                        style={{flex: 1}}
                        onChangeText={(mbInput) => this.setState({mobile: mbInput})}
                        value={this.state.mobile}
                    />
                    <Text style={styles.getCode} onPress={ ()=> this._getCode()}>{getCodeText}</Text>
                </View>
                <View style={styles.dividingLine}></View>
                <View style={styles.item}>
                    <View>
                        <Image
                            source={require('../images/mobileCode_ICON_Copy.png')}
                            style={styles.ionicimg}/>
                    </View>
                    <TextInput
                        ref="inputLoginPwd"
                        placeholder="请输入验证码"
                        clearTextOnFocus={true}
                        clearButtonMode="while-editing"
                        underlineColorAndroid={'transparent'}
                        keyboardType={'numeric'}
                        maxLength={4}
                        secureTextEntry={true}
                        style={{flex: 1}}
                        onChangeText={(codeInput) => this.setState({getCode: codeInput})} />
                </View>
                <View style={styles.dividingLine}></View>

                <TouchableHighlight style={styles.login}
                                    underlayColor='transparent'
                                    onPress={()=>this.login()}>
                    <Text style={styles.loginText}>登录</Text>


                </TouchableHighlight>
                <View style={styles.logo}>
                    <Text > 未注册的手机号将自动注册成盈家用户</Text>
                </View>

            </View>)
    }

}


